import React from 'react';
import { connect } from 'umi';
import CompanySearch from "../../components/organize/company/CompanySearch";
import CompanyToolbar from "../../components/organize/company/CompanyToolbar";
import CompanyModal from "../../components/organize/company/CompanyModal";
import CompanyList from "../../components/organize/company/CompanyList";
import TablePagination from '../../components/common/TablePagination';

class CompanyPage extends React.Component {

  render() {

    let {dispatch, globalModel, companyModel} = this.props;
    const { companyList, total, companyLoading, operateType, companyModalVisible, currentPage, pageSize,
            selectedRowKeys, selectedRows, companyInfoData, searchParams, unfoldCollapseKeys } = companyModel;

    const companySearchProps = {
      onSearch: (searchParams) => {
        dispatch({type: "companyModel/updateState", payload: {searchParams}});
        dispatch({type: 'companyModel/getListDatas', payload: {currentPage, pageSize, params: searchParams}});
      },
      onReset: () => {
        dispatch({type: "companyModel/updateState", payload: {searchParams: null}});
      },
    }

    const companyModalProps = {
      operateType,
      companyModalVisible,
      companyInfoData,
      onSave: (values) => {
        const selectedRow = selectedRows[0];
        if (selectedRow) {
          values.parentId = selectedRow.id;
          values.longCode = selectedRow.longCode;
        }
        values.parentId = values.parentId ? values.parentId : "";
        values.longCode = values.longCode ? values.longCode : "";
        dispatch({type: "companyModel/addCompany", payload: values});
      },
      updateCompany: (values) => {
        dispatch({type: "companyModel/updateCompany", payload: values});
      },
      onCancel: () => {
        dispatch({type: "companyModel/updateState", payload: {companyModalVisible: false}});
      },
    }

    const companyToolbarProps = {
      isCollapse: unfoldCollapseKeys.length == 0 ? false : true,
      addSave: () => {
        dispatch({type: "companyModel/updateState", payload: {companyModalVisible: true}});
      },
      unfoldCollapse: () => {
        dispatch({type: "companyModel/unfoldCollapse", payload: {}});
      }
    }

    const companyListProps = {
      currentPage,
      pageSize,
      companyList,
      companyLoading,
      unfoldCollapseKeys,
      onEdit: (record) => {
        dispatch({
          type: "companyModel/updateState",
          payload: {companyModalVisible: true, operateType: "edit", companyInfoData: record}
        });
      },
      onDelete: (record) => {
        dispatch({type: "companyModel/deleteCompany", payload: {ids: record.id}});
      },
      rowSelection: {
        selectedRowKeys,
        selectedRows,
        onChange: (keys, selectedRows) => {
          dispatch({
            type: 'companyModel/updateState',
            payload: {
              selectedRows: selectedRows,
              selectedRowKeys: keys,
            },
          })
        },
      },
      onExpandList: (expanded, record) => {
        if (expanded) {
          unfoldCollapseKeys.push(record.id);
        } else {
          const index = unfoldCollapseKeys.indexOf(record.id);
          if (index > -1) unfoldCollapseKeys.splice(index, 1);
        }
        dispatch({ type: "companyModel/updateState", payload: { unfoldCollapseKeys }});
      },
    }

    const tablePaginationProps = {
      total,
      currentPage,
      pageSize,
      onPageChange: (currentPage, pageSize) => {
        dispatch({type: 'companyModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
      },
      onShowSizeChange: (currentPage, pageSize) => {
        dispatch({type: 'companyModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
      },
    };

    return (
      <div style={{ padding: "15px" }}>
        <CompanySearch {...companySearchProps} />
        <CompanyToolbar {...companyToolbarProps} />
        <CompanyList {...companyListProps} />
        <TablePagination {...tablePaginationProps} />

        <CompanyModal {...companyModalProps} />
      </div>
    );
  };
}

function mapStateToProps({globalModel, companyModel}){
  return {globalModel, companyModel};
}

export default connect(mapStateToProps)(CompanyPage);
